<template>
  <div class="growth" id="container">增长率</div>
</template>
<script src="//webapi.amap.com/maps?v=1.4.15&plugin=Map3D&key=pSmO00lyWhU7gnc36BxOi3AwXV6Ckiyd&"></script>
<script src="//webapi.amap.com/loca?v=1.3.1&key=pSmO00lyWhU7gnc36BxOi3AwXV6Ckiyd"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.growup();
  },
  methods: {
    growup() {
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/grey",
        zoom: 5,
        pitch: 0,
        center: [104.090834, 31.270677],
        features: ["bg", "road"],
        viewMode: "3D"
      });

      var layer = new Loca.LabelsLayer({
        fitView: true,
        map: map,
        collision: true
      });

      $.get("//a.amap.com/Loca/static/mock/trafficjam_lnglat.csv", function(
        datas
      ) {
        layer
          .setData(datas, {
            type: "csv",
            lnglat: function(o) {
              return dist[o.value["地区"]];
            },
            lnglat: "lnglat"
          })
          .setOptions({
            style: {
              direction: "center",
              offset: [0, 0],
              text: function(data) {
                return data.value["city"] + " " + data.value["mom"];
              },
              fillColor: function(data) {
                var income = +data.value["mom"].slice(0, -1);
                return income < -5
                  ? "#0C6DB0"
                  : income < -4
                  ? "#99d594"
                  : income < -3
                  ? "#99d594"
                  : income < -2
                  ? "#fee08b"
                  : income < -1
                  ? "#fee08b"
                  : "#fc8d59";
              },
              fontSize: function(data) {
                var income = +data.value["mom"].slice(0, -1);
                return income < -5
                  ? 12
                  : income < -4
                  ? 12
                  : income < -3
                  ? 16
                  : income < -2
                  ? 18
                  : income < -1
                  ? 26
                  : 30;
              },
              strokeWidth: 0
            }
          })
          .render();

        layer.setzIndex(100);
      });
    }
  }
};
</script>
<style  scoped>
#container {
  height: calc(100vh - 50px);
  background-color: #23262f;
}
</style>
